<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { select_course_header_api } from "@/api/new_guide";
import { course_api } from "@/api/tour";
import { AppData } from "@/utils/app";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import ListTypeItem from "./components/list-type-item.vue";
import StudyCourseItem from "@/pages/index/components/study-course-item.vue";
import ListMore from "@/components/list/more.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad(() => {
  select_course_header_api().then((resp) => {
    typeList.value = resp.items;
  });

  reloadList();
});
onShow(() => {
  myData.isCertificate = AppData.userData.is_guide_certification === 1;
});
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());

const queryData = reactive({ course_type: 0 });

const typeList = ref<any[]>([]);
const typeClick = (id: number) => {
  queryData.course_type = id;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 20 }, (query) => {
    return course_api({ ...query, ...toRaw(queryData) });
  });

const courseClick = (index: number) => {
  checkCertificate((isLogin) => {
    const course = listData.value[index];
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/study/pages/course/detail?id=${course.id}`
    );
  });
};

const checkCertificate = (callback: (isLogin: boolean) => void) => {
  Account.checkLogin((isLogin) => {
    // 已认证
    if (AppData.userData.is_guide_certification === 1) return callback(isLogin);

    isLogin && Router.navigateBack();
    popupModal.value?.show(
      {
        content:
          "你好！这里是全球导游人的家园，为了能给你提供针对性的专业内容服务，需要对你身份进行基础认证，敬请理解！",
        confirmText: "开始认证",
        translateY: "-55%",
      },
      () => {
        Router.navigateTo(
          AppData.userData.status === -1
            ? "/package/guider/pages/apply/type"
            : "/package/guider/pages/apply/detail"
        );
      }
    );
  });
};

const myData = reactive({ isCertificate: false });

const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <PageSticky>
    <scroll-view class="list-type" scroll-x enhanced :show-scrollbar="false">
      <view class="list-type-space"></view>
      <view
        class="list-type-item"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        <ListTypeItem
          :isActive="queryData.course_type === i.id"
          :text="i.name"
        />
      </view>
    </scroll-view>
  </PageSticky>

  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="courseClick(d)"
      >
        <StudyCourseItem :info="i" :isCertificate="myData.isCertificate" />
      </view>
    </view>

    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
.list-type {
  height: 88rpx;
  white-space: nowrap;

  .list-type-space,
  .list-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .list-type-space {
    width: 30rpx;
  }

  .list-type-item {
    padding: 0 10rpx;
    margin-top: 16rpx;
    margin-right: 40rpx;
  }
}

.list-data {
  .list-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 30rpx;
  }

  .list-data-item {
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}
</style>